<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="../static/jqgrid/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="../static/jqgrid/css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="../static/bootstrap-4.1.1/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" media="screen"
	href="../static/css/font-awesome.min.css" />
	
<style>
html, body {
	margin: 0;
	padding: 0;
	font-size: 75%;
	height: 100%;
}
</style>
</head>
<body>

	<div class="container-fluid px-1">

		<!-- 导航 -->
		<nav>
			<ol class="breadcrumb mb-3">
				<li class="breadcrumb-item">安全管理</li>
				<li class="breadcrumb-item active">角色管理</li>
			</ol>
		</nav>

		<!-- 查询form表单 -->
		<form id="form-u-query" class="form-inline mb-3">


			<div class="input-group mr-2">
				<div class="input-group-prepend">
					<label class="input-group-text">状态</label>
				</div>
				<select id="select-u-status" class="custom-select" name="u_status">
					<option value=''>全部</option>
					<option value="00">未确定</option>
					<option value="22">确定</option>
					<option value="55">启用</option>
					<option value="77">禁用</option>
				</select>
			</div>

			<div class="input-group mr-2" style="width:150px;">
				<div class="input-group-prepend">
					<span class="input-group-text">编号</span>
				</div>
				<input type="text" class="form-control" name="u_id">
			</div>

			<div class="input-group  mr-2" style="width:150px;">
				<div class="input-group-prepend">
					<span class="input-group-text">名称</span>
				</div>
				<input type="text" class="form-control" name="u_name">
			</div>


			<button id="bn-u-query" type="button" class="btn btn-primary"><i class="fa fa-search" ></i> 查询</button>

		</form>

		<!-- 操作按钮 -->
		<div class="btn-group mb-2">
			<button type="button" id="bn-u-add" class="btn btn-primary"><i class="fa fa-plus"></i> 新增</button>
			<button type="button" id="bn-u-confirm" class="btn btn-primary"><i class="fa fa-check" ></i> 确定</button>
			<button type="button" id="bn-u-enable" class="btn btn-primary"><i class="fa fa-hand-paper-o"></i> 启用</button>
			<button type="button" id="bn-u-disable" class="btn btn-primary"><i class="fa fa-lock"></i> 禁用</button>
			<button type="button" id="bn-u-del-multi" class="btn btn-danger"><i class="fa fa-minus"></i> 删除</button>
		</div>

		<!-- 
		功能描述：在本页加载完成时，即发送ajax请求，获取角色信息的json格式的数据，通过生成一个表格 。
		具体实现：采用基于jquery的js插件jqGrid来生成表格
		如何下载jqGrid：访问github，搜索jqGrid
	
	    -->

		<div id="pager"></div>
		<table id="grid"></table>

	</div>
	
	<div id="u-module" style="display: none;" class="p-2" >
		<h6 style="font-weight: bold;">[{{userMenus.userName}}] 的权限</h6>
		<div style="display: flex;flex-direction: column;border:1px solid #EEEEEE;border-radius:3px;" class="p-2 mb-3" >
		
		
			<div v-for="mainMenu in menus" class="mb-1" >
				
				<div style="padding:5px 0 5px 0;font-weight: bold;">				
					<i class="fa fa-wrench"></i> {{mainMenu.menuName}}					
				</div>
				
				
				<div style="display: flex;flex-direction: row;flex-wrap: wrap;" class="ml-3 py-1">
					<div v-for="subMenu in mainMenu.subMenuList"  style="width:120px;"  >						
						<label :style="moduleStyleObject(subMenu)" style="vertical-align: middle;cursor: pointer;padding:5px 10px;">
							<input type="checkbox"  :value="subMenu.menuId" v-model="userMenus.menuIDs"  style="vertical-align: middle;" >
							<span style="vertical-align: middle;">{{subMenu.menuName}}</span>
						</label>					
					</div>
				</div>
				
			</div>
		
		</div>
		<div style="text-align: right;">
			<button type="button" class="btn btn-primary" @click="selectAllModule"  >全选</button>
			<button type="button" class="btn btn-primary" @click="revokeAllModule"  >全撤</button>
			<button type="button" class="btn btn-primary" @click="confirmRoleModule" style="width:100px;" >确定</button>
			
		</div>
		
	</div>

	<script src="../static/jqgrid/js/jquery.min.js" type="text/javascript"></script>
	<script src="../static/jqgrid/js/trirand/i18n/grid.locale-cn.js"
		type="text/javascript"></script>
	<script src="../static/jqgrid/js/trirand/jquery.jqGrid.min.js"
		type="text/javascript"></script>

	<script src="../static/js/popper-1.14.3.min.js" type="text/javascript"></script>
	<script src="../static/bootstrap-4.1.1/bootstrap.min.js"
		type="text/javascript"></script>

	<script src="../static/layer/layer.js"></script>
	
	<script type="text/javascript" src="../static/js/vue-2.5.16.min.js" ></script>
	<script type="text/javascript" src="../static/js/axios.min.js" ></script>

	<script type="text/javascript">
	
	let vm = new Vue({
		
		el:'#u-module',
		data:{
			menus:[],
			userMenus:{},
			allMenuIds:[]
		},
		
		computed:{
			
		},
		
		methods:{
			
			//处理样式
			moduleStyleObject(subMenu){
				
				let menuIds= this.userMenus.menuIDs;
				if(menuIds){
					for(let menuId of menuIds){
						if(subMenu.menuId===menuId){
							return {
								color:'#0066B9',
								fontWeight:'bold',
								backgroundColor:'#EEFFFF',
								borderRadius:'8px'
							};
						}
					}
				}
				
				return {color:'#666666'};
			},
			
			//选择所有权限
			selectAllModule(){
				this.userMenus.menuIDs=this.allMenuIds;
			},
			
			//选择所有权限
			revokeAllModule(){
				this.userMenus.menuIDs=[];
			},
			
			//确认权限设置
			confirmRoleModule(){
				
				layer.confirm('你确实要设置用户权限吗？', {icon: 3, title:'警告'}, (index)=>{
		  			//参数index是本确认框的编号
		  			 
		  			let loadLayerIdx = layer.load();//显示加载层
		  			
		  			
		  			axios
					.put(
							'user/module/'+this.userMenus.userId,							
							this.userMenus.menuIDs	
							
					)
					.then((response)=>{
						
						layer.close(loadLayerIdx);
						
						let result=response.data;
						if(result.success){		  					
		  					layer.msg(
		  							result.message, 
		  							{
		  							  icon: 1,
		  							  time: 1500
		  							}
		  					); 
		  					
		  				}else{
		  					layer.msg(result.message, {icon: 2}); 
		  				}
					})
					.catch((error)=>{
						layer.close(loadLayerIdx);
						console.log(error);
						layer.msg(result.message, {icon: 2});
					});
		  			
		  			layer.close(index);//关闭确认框
		  			
				});

			},
		},
		
		mounted(){
			 axios
	   		  .get('user/module')
	   		  .then((response)=>{
	   			  this.menus=response.data;
	   			  for(let mainMenu of this.menus){
	   				  for(let subMenu of mainMenu.subMenuList){
	   					  this.allMenuIds.push(subMenu.menuId);
	   				  }
	   			  }
	   		  })
	   		  .catch((error)=>{
	   			  
	   		  });
		},

	});
  
	//窗口编号
	let layerIdx;
	
	$("#grid").jqGrid({
		
		datatype: 'json',
		url: 'user',
		mtype:'GET',
		colModel: [
			{name: 'u_id', label : '用户编号' , key:true},
			{name: 'u_name', label : '用户名称'},
			{name: 'u_status_name', label : '用户状态'},
			{
		   	   name: 'u_id', 
		   	   label : '操作',
		   	   formatter:function(value,options,row){
		   		   if(row.u_status==='00'){
						return  `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-upd" ><i class="fa fa-edit"></i> 修改</button> `+
	   		   		  			`<button data-id="\${value}" class="btn btn-danger btn-sm bn-u-del" ><i class="fa fa-minus"></i> 删除</button> `+
	   		   		  			`<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-confirm" ><i class="fa fa-check" ></i> 确定</button>`;
		   		   }else if(row.u_status==='22'){
		   				return `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-enable" ><i class="fa fa-hand-paper-o"></i> 启用</button> `+
		   					   `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-module" ><i class="fa fa-wrench"></i> 权限</button>`;		   			   
		   		   }else if(row.u_status==='55'){
		   				return `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-disable" ><i class="fa fa-lock"></i> 禁用</button> `+
	   					   	   `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-module" ><i class="fa fa-wrench"></i> 权限</button>`;		   			   
		   		   }else if(row.u_status==='77'){
		   				return `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-enable" ><i class="fa fa-hand-paper-o"></i> 启用</button> `+
	   					   	   `<button data-id="\${value}" class="btn btn-primary btn-sm bn-u-module" ><i class="fa fa-wrench"></i> 权限</button>`;		   			   
		   		   }
		   		  
		   	   }
			}
	    ],
	    
	    pager:'#pager',
	    rowNum:10,
	    rowList:[5,10,15,20,30],
	    multiselect:true,
	    autowidth:true, 
	   
	    responsive:true
		    
	});
  
	//设置表格高度适应窗口
	$("#grid").setGridHeight($(window).height()-185); 
	$(window).resize(()=>{  
      $("#grid").setGridHeight($(window).height()-185);     
	});
    
    /*
    $("#grid").on("jqGridBeforeSelectRow", function(event, rowid) {   	 	
   	 	//event.preventDefault();//阻止默认行为
   	 	return false;//即阻止默认行为，又阻止冒泡行为
   	});
    */
     
    //表格加载完成后设置修改和单删按钮事件，因为这些按钮在生成表格时才生成
    $("#grid").on("jqGridGridComplete", function(event) {
	      
    	  //修改按钮事件
	   	  $('.bn-u-upd').click(function(){
	   		  
	   		  let u_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  $.get('user_upd_to',`u_id=\${u_id}`,function(html){
	   			  
	   			  layerIdx = layer.open({
					  title:'修改角色信息',
	   			      type: 1,
	   			      area: ['700px', '540px'],		
	   			      skin:'layui-layer-lan',
	   			      anim: 1,
	   			      content: html
	   			  });
	   			  
	   		  },'html');
	   		  
	   		  return false;
	   		  
	   	  });	
    	  
	   	//单删除按钮事件
	   	$('.bn-u-del').click(function(){
	   		  
	   		  let u_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  //确认是否删除
	  		  layer.confirm('你确实要删除该用户信息吗？', {icon: 3, title:'警告'}, function(index){
	  			//参数index是本确认框的编号
	  			 
	  			let loadLayerIdx = layer.load();//显示加载层
	  			
	  			$.ajax({
	  				url:`user/\${u_id}`,
	  				method:'delete',
	  				//contentType:'application/json',
	  				//data:JSON.stringify(selIds),
	  				dataType:'json'
	  			})
	  			.done((result)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				
	  				if(result.success){
	  					reloadData();//重载数据
	  					layer.msg(
	  							result.message, 
	  							{
	  							  icon: 1,
	  							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
	  							}
	  					); 
	  					layer.close(layerIdx);//关闭窗口
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
	  			})
	  			.fail((xhr)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				layer.msg('服务器错误！', {icon: 6}); 
	  				
	  			}); 
	  			  
	  			layer.close(index);//关闭确认框
	  			
	  		});
	   		  
	   		return false;
	   		  
	   	 });
	   	
	   	//单确定按钮事件
	   	$('.bn-u-confirm').click(function(){
	   		  
	   		  let u_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  //确认是否确定
	  		  layer.confirm('你确实要确定该用户信息吗？', {icon: 3, title:'警告'}, function(index){
	  			//参数index是本确认框的编号
	  			 
	  			let loadLayerIdx = layer.load();//显示加载层
	  			
	  			$.ajax({
	  				url:`user/\${u_id}/22`,
	  				method:'put',
	  				dataType:'json'
	  			})
	  			.done((result)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				
	  				if(result.success){
	  					reloadData();//重载数据
	  					layer.msg(
	  							result.message, 
	  							{
	  							  icon: 1
	  							}
	  					); 
	  					layer.close(layerIdx);//关闭窗口
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
	  			})
	  			.fail((xhr)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				layer.msg('服务器错误！', {icon: 6}); 
	  				
	  			});
	  			  
	  			  
	  			layer.close(index);//关闭确认框
	  			
	  		});
	  		
	   		  
	   		return false;
	   		  
	   	 });
	   	
	   	//单启用按钮事件
	   	$('.bn-u-enable').click(function(){
	   		  
	   		  let u_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  //确认是否启用
	  		  layer.confirm('你确实要启用该用户信息吗？', {icon: 3, title:'警告'}, function(index){
	  			//参数index是本确认框的编号
	  			 
	  			let loadLayerIdx = layer.load();//显示加载层
	  			
	  			$.ajax({
	  				url:`user/\${u_id}/55`,
	  				method:'put',
	  				dataType:'json'
	  			})
	  			.done((result)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				
	  				if(result.success){
	  					reloadData();//重载数据
	  					layer.msg(
	  							result.message, 
	  							{
	  							  icon: 1
	  							}
	  					); 
	  					layer.close(layerIdx);//关闭窗口
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
	  			})
	  			.fail((xhr)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				layer.msg('服务器错误！', {icon: 6}); 
	  				
	  			});
	  			  
	  			  
	  			layer.close(index);//关闭确认框
	  			
	  		});
 
	   		return false;
	   		  
	   	 });
	   			   	
	   	//单禁用按钮事件
	   	$('.bn-u-disable').click(function(){
	   		  
	   		  let u_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		  
	   		  //确认是否禁用
	  		  layer.confirm('你确实要禁用该用户信息吗？', {icon: 3, title:'警告'}, function(index){
	  			//参数index是本确认框的编号
	  			 
	  			let loadLayerIdx = layer.load();//显示加载层
	  			
	  			$.ajax({
	  				url:`user/\${u_id}/77`,
	  				method:'put',
	  				dataType:'json'
	  			})
	  			.done((result)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				
	  				if(result.success){
	  					reloadData();//重载数据
	  					layer.msg(
	  							result.message, 
	  							{
	  							  icon: 1
	  							}
	  					); 
	  					layer.close(layerIdx);//关闭窗口
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
	  			})
	  			.fail((xhr)=>{
	  				
	  				layer.close(loadLayerIdx);
	  				layer.msg('服务器错误！', {icon: 6}); 
	  				
	  			});
	  			  
	  			  
	  			layer.close(index);//关闭确认框
	  			
	  		});
	   		  
	   		return false;
	   		  
	   	 });
	   	
	  	//权限按钮事件
	  	$('.bn-u-module').click(function(){
	  		
	   		let u_id = $(this).attr('data-id');//attr方法是jquery的方法，作用是访问属性
	   		
	  		axios.get('user/module/'+u_id)
	  			 .then((response)=>{
	  				vm.userMenus=response.data;
	  				layerIdx = layer.open({
						  title:'权限分配',
		   			      type: 1,
		   			      area: ['700px', '540px'],		
		   			      skin:'layui-layer-lan',
		   			      anim: 1,
		   			      content: $('#u-module')
		   			  });
	  			 })
	  			 .catch((error)=>{
	  				 
	  			 });
	   		  
	   		  return false;  
	   	});	
      
    });   
  
  //重载数据   
  const reloadData = function(){
 	  let arr=$('#form-u-query').serializeArray();
	  
	  let params={}; //params['kkk']=6  ===== params.kkk=6
	  
	  for(let i=0;i<arr.length;i++){
		  params[arr[i].name]=arr[i].value;
	  }
	  
	  $("#grid").jqGrid('setGridParam',{ 
          url:"user", 
          postData:params, //发送数据 
          page:1 
      }).trigger("reloadGrid"); 
  }
  
  //按钮状态设置
  const setBnStatus=function(){
	  let currStatus = $('#select-u-status').val();
	  switch(currStatus){
	  case '':
		  $('#bn-u-add,#bn-u-confirm,#bn-u-enable,#bn-u-disable,#bn-u-del-multi').prop('disabled',true);
		  break;
	  case '00':
		  $('#bn-u-add,#bn-u-del-multi,#bn-u-confirm').prop('disabled',false);
		  $('#bn-u-enable,#bn-u-disable').prop('disabled',true);	
		  break;
	  case '22':
		  $('#bn-u-enable').prop('disabled',false);
		  $('#bn-u-add,#bn-u-del-multi,#bn-u-confirm,#bn-u-disable').prop('disabled',true);	
		  break;
	  case '55':
		  $('#bn-u-disable').prop('disabled',false);
		  $('#bn-u-enable,#bn-u-add,#bn-u-del-multi,#bn-u-confirm').prop('disabled',true);	
		  break;
	  case '77':
		  $('#bn-u-enable').prop('disabled',false);
		  $('#bn-u-disable,#bn-u-add,#bn-u-del-multi,#bn-u-confirm').prop('disabled',true);	
		  break;
	  }
	  
  };
  
  //执行按钮状态设置
  setBnStatus();
  
  //查询按钮事件
  $('#bn-u-query').click(function(){	  
	  reloadData();	  
  });
  
  $('#select-u-status').change(function(){
	  reloadData();
	  setBnStatus();
  });
  
  //增加按钮事件
  $('#bn-u-add').click(function(){
	  $.get('user_add_to',function(html){
		  
		  layerIdx = layer.open({
			  title:'新增用户信息',
		      type: 1,
		      area: ['700px', '540px'],		
		      skin:'layui-layer-lan',
		      anim: 5,
		      content: html
		  });
 
	  },'html');
  });
  
  //多删除按钮事件
  $('#bn-u-del-multi').click(function(){
	  
	   var selIds = $("#grid").jqGrid('getGridParam','selarrrow');
	   if(!selIds || selIds.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	   
		//确认是否删除
		layer.confirm('你确实要删除这些用户信息吗？', {icon: 3, title:'警告'}, function(index){
			//参数index是本确认框的编号
			 
			let loadLayerIdx = layer.load();//显示加载层
			
			$.ajax({
				url:'user',
				method:'delete',
				contentType:'application/json',
				data:JSON.stringify(selIds),
				dataType:'json'
			})
			.done((result)=>{
				
				layer.close(loadLayerIdx);
				
				if(result.success){
					reloadData();//重载数据
					layer.msg(
							result.message, 
							{
							  icon: 1,
							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
							}
					); 
					layer.close(layerIdx);//关闭窗口
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
			})
			.fail((xhr)=>{
				
				layer.close(loadLayerIdx);
				layer.msg('服务器错误！', {icon: 6}); 
				
			});
			  
			  
			layer.close(index);//关闭确认框
			
		});
		
  });
  
  //多确定按钮事件
  $('#bn-u-confirm').click(function(){
	  
	   var selIds = $("#grid").jqGrid('getGridParam','selarrrow');
	   if(!selIds || selIds.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	   
		//确认是否确定
		layer.confirm('你确实要确定这些用户信息吗？', {icon: 3, title:'警告'}, function(index){
			//参数index是本确认框的编号
			 
			let loadLayerIdx = layer.load();//显示加载层
			
			$.ajax({
				url:'user/22',
				method:'put',
				contentType:'application/json',
				data:JSON.stringify(selIds),
				dataType:'json'
			})
			.done((result)=>{
				
				layer.close(loadLayerIdx);
				
				if(result.success){
					reloadData();//重载数据
					layer.msg(
							result.message, 
							{
							  icon: 1
							}
					); 
					layer.close(layerIdx);//关闭窗口
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
			})
			.fail((xhr)=>{
				
				layer.close(loadLayerIdx);
				layer.msg('服务器错误！', {icon: 6}); 
				
			});

			layer.close(index);//关闭确认框
			
		});

  });

  //多启用按钮事件
  $('#bn-u-enable').click(function(){
	  
	   var selIds = $("#grid").jqGrid('getGridParam','selarrrow');
	   if(!selIds || selIds.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	   
		//确认是否启用
		layer.confirm('你确实要启用这些用户信息吗？', {icon: 3, title:'警告'}, function(index){
			//参数index是本确认框的编号
			 
			let loadLayerIdx = layer.load();//显示加载层
			
			$.ajax({
				url:'user/55',
				method:'put',
				contentType:'application/json',
				data:JSON.stringify(selIds),
				dataType:'json'
			})
			.done((result)=>{
				
				layer.close(loadLayerIdx);
				
				if(result.success){
					reloadData();//重载数据
					layer.msg(
							result.message, 
							{
							  icon: 1
							}
					); 
					layer.close(layerIdx);//关闭窗口
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
			})
			.fail((xhr)=>{
				
				layer.close(loadLayerIdx);
				layer.msg('服务器错误！', {icon: 6}); 
				
			});
			  
			layer.close(index);//关闭确认框
			
		});
		
  });
  
  //多禁用按钮事件
  $('#bn-u-disable').click(function(){
	  
	   var selIds = $("#grid").jqGrid('getGridParam','selarrrow');
	   if(!selIds || selIds.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	   
		//确认是否警用
		layer.confirm('你确实要禁用这些用户信息吗？', {icon: 3, title:'警告'}, function(index){
			//参数index是本确认框的编号
			 
			let loadLayerIdx = layer.load();//显示加载层
			
			$.ajax({
				url:'user/77',
				method:'put',
				contentType:'application/json',
				data:JSON.stringify(selIds),
				dataType:'json'
			})
			.done((result)=>{
				
				layer.close(loadLayerIdx);
				
				if(result.success){
					reloadData();//重载数据
					layer.msg(
							result.message, 
							{
							  icon: 1
							}
					); 
					layer.close(layerIdx);//关闭窗口
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
			})
			.fail((xhr)=>{
				
				layer.close(loadLayerIdx);
				layer.msg('服务器错误！', {icon: 6}); 
				
			});
			  
			layer.close(index);//关闭确认框
			
		});

  });
  
  
</script>

</body>
</html>